{% extends 'base.html' %}
{% block title %}首页 - Local Library{% endblock %}
{% block content %}
<div class="dashboard-layout">
    <div class="dashboard-main">
        <div class="welcome-card">
            <h1 style="display:flex;align-items:center;font-size:2rem;"><span style="font-size:2.2rem;margin-right:12px;">📚</span>欢迎来到本地图书馆</h1>
            <div style="color:#666;font-size:1.1rem;margin-bottom:18px;">在这里，你可以浏览图书、查看作者信息，并进行图书借阅。</div>
        </div>
        <div class="stats-row">
            <div class="stat-card">
                <div class="stat-icon" style="background:#2563eb1a;"><span style="font-size:2rem;">📖</span></div>
                <div class="stat-label">图书总数</div>
                <div class="stat-value">{{ num_books }}</div>
            </div>
            <div class="stat-card">
                <div class="stat-icon" style="background:#22c55e1a;"><span style="font-size:2rem;">👤</span></div>
                <div class="stat-label">作者总数</div>
                <div class="stat-value">{{ num_authors }}</div>
            </div>
            <div class="stat-card">
                <div class="stat-icon" style="background:#06b6d41a;"><span style="font-size:2rem;">✅</span></div>
                <div class="stat-label">可借图书</div>
                <div class="stat-value">{{ num_available }}</div>
            </div>
        </div>
        <div class="cards-row">
            <div class="info-card">
                <div class="info-card-title" style="color:#2563eb;"><span style="font-size:1.2rem;">★</span> 借阅排行榜</div>
                {% for book in hot_books %}
                    <div class="info-item">
                        <b>{{ book.title }}</b> <span style="color:#888;font-size:0.98rem;">({{ book.author }})</span>
                        <span class="tag tag-success" style="margin-left:8px;">借出{{ book.borrowed_count }}次</span>
                    </div>
                {% empty %}
                    <div class="info-item">暂无数据</div>
                {% endfor %}
            </div>
            <div class="info-card">
                <div class="info-card-title" style="color:#a21caf;"><span style="font-size:1.2rem;">🎁</span> 为你推荐</div>
                {% if recommend_books %}
                    {% if recommend_reason %}<div style="color:#a21caf;font-size:0.98rem;margin-bottom:8px;">{{ recommend_reason }}</div>{% endif %}
                    {% for book in recommend_books %}
                        <div class="info-item" style="display:flex;align-items:flex-start;gap:12px;">
                            {% if book.cover %}
                                <img src="{{ book.cover.url }}" alt="封面" style="width:48px;height:64px;object-fit:cover;border-radius:6px;box-shadow:0 1px 4px #a21caf22;">
                            {% else %}
                                <div style="width:48px;height:64px;background:#e0e7ef;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:#b0bec5;">📖</div>
                            {% endif %}
                            <div style="flex:1;">
                                <b>{{ book.title }}</b> <span style="color:#888;font-size:0.98rem;">({{ book.author }})</span>
                                <div style="font-size:0.97rem;color:#888;">{{ book.summary|truncatechars:32 }}</div>
                                <span class="stars">
                                    {% for i in "12345" %}
                                        {% if book.rating >= i|add:'0.5' %}<span class="star">★</span>{% elif book.rating >= i %}<span class="star">★</span>{% else %}<span class="star star-empty">★</span>{% endif %}
                                    {% endfor %}
                                </span>
                                <span class="tag tag-pink">收藏{{ book.favorite_count }}</span>
                                <span class="tag tag-success">点赞{{ book.like_count }}</span>
                            </div>
                        </div>
                    {% endfor %}
                {% else %}
                    <div class="info-item">暂无个性化推荐</div>
                {% endif %}
            </div>
        </div>
    </div>
    <div class="dashboard-side">
        <div class="side-card">
            <div class="side-title">快捷导航</div>
            <ul class="side-nav">
                <li><a href="{% url 'my-borrowed' %}">📚 我的借阅</a></li>
                <li><a href="{% url 'my-loan-history' %}">🕓 借阅历史</a></li>
                <li><a href="{% url 'authors' %}">👤 作者列表</a></li>
                <li><a href="{% url 'all-borrowed' %}">📖 借出图书</a></li>
            </ul>
        </div>
        <div class="side-card">
            <div class="side-title">访问计数器</div>
            <div class="counter" style="margin:0;">您已访问本页面 {{ num_visits }} 次。</div>
        </div>
    </div>
</div>
{% endblock %} 